<template>
    <el-config-provider :locale="locale">
        <el-container v-if="route.meta.showInAside">
            <el-aside width="auto">
                <!-- <leftnav></leftnav> -->
            </el-aside>
            <el-container>
                <el-header>
                    <!-- <el-button @click="router.push({
                        name: 'changePWD'
                    });">跳转</el-button> -->
                    <tabs></tabs>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
                <el-footer v-if="!route.meta.showfooter">
                    <div
                        style="display: flex;justify-content: space-between;align-items: center;height: 40px;color: #888;font-size: 14px;">
                        <div style="display: flex;justify-content: flex-start;">
                            <div style="margin-right: 20px;">区划名称：{{ localname }}</div>
                            <div>区划编码：{{ localcode }}</div>
                        </div>
                        <div>建设单位：河南省统计局</div>
                    </div>
                </el-footer>
            </el-container>
        </el-container>
        <router-view v-else></router-view>
    </el-config-provider>
</template>

<script setup>
import leftnav from './components/leftnav.vue';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import tabs from './components/tabs.vue';
import { useRoute, useRouter } from 'vue-router';
import { dataStore } from './store/data';
const locale = zhCn;
const $store = dataStore();
import { ref, onMounted, watch } from 'vue';
import $sys from './api/sys';
const localname = ref('');
const localcode = ref('');
onMounted(() => {
    localname.value = localStorage.getItem('qhinfo');
    localcode.value = localStorage.getItem('code');
    console.log(localcode.value, 'localcode');
});
watch(() => $store.loginflag, (nv, ov) => {

    localcode.value = localStorage.getItem('userName');
    $sys.getDivisionInfo().then(res => {
        if (res.code == 200) {
            let str = '';
            res.data.forEach((item, index) => {

                str += item;
            })
            localname.value = str;
            localStorage.setItem('qhinfo', str);
        }

    })

})

const route = useRoute();
const router = useRouter();
const mwidth = ref(200);
</script>

<style scoped>
.el-aside {
    max-width: 200px;
    height: 100vh;
}

.el-main {
    background: #f0f2f5;
    /* padding: 20px 20px 0px 20px; */
    overflow: hidden;
    --el-main-padding: 0px !important;
}

.el-header {
    padding: 0;
    height: 102px;
}

.el-footer {
    height: auto;
    background-color: #F3F3F3;
    border-top: 1px solid #ccc;
}
</style>
<style>
.sjxian i {
    display: block;
    background: #fff;
    position: absolute;
}

.sjxian {
    .sij_xian_01 {
        top: 0;
        left: 0;
        width: 11px;
        height: 1px;
    }

    .sij_xian_02 {
        top: 0;
        left: 0;
        width: 1px;
        height: 11px;
    }

    .sij_xian_03 {
        bottom: 0;
        left: 0;
        width: 11px;
        height: 1px;
    }

    .sij_xian_04 {
        bottom: 0;
        left: 0;
        width: 1px;
        height: 11px;
    }

    .sij_xian_05 {
        top: 0;
        right: 0;
        width: 11px;
        height: 1px;
    }

    .sij_xian_06 {
        top: 0;
        right: 0;
        width: 1px;
        height: 11px;
    }

    .sij_xian_07 {
        bottom: 0;
        right: 0;
        width: 11px;
        height: 1px;
    }

    .sij_xian_08 {
        bottom: 0;
        right: 0;
        width: 1px;
        height: 11px;
    }
}

.top20 {
    margin-top: 20px;
}

html,
body,
#app {

    height: 100%;

}

.el-select {
    width: 100% !important;
}

.xuanxbg .el-tabs__item.is-active {
    background: #409eff !important;
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.xuanxbg .el-upload-list--picture-card .el-upload-list__item {
    width: 100px !important;
    height: 100px !important;
}

.xuanxbg .el-upload--picture-card {
    width: 100px !important;
    height: 100px !important;
}

.box-card {
    width: 100%;
}

.el-card.is-always-shadow {
    box-shadow: none
}
</style>